<template>
  <div class="container">
    <el-dialog title="单据驳回" :visible.sync="selectIsDisplay" width="35%" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="selectIsDisplay" top="30px" :append-to-body="true" class="myDialog">
      <div class="container">
        <el-container class="myProcContainer">
          <el-container>
            <el-aside width="40%" style="border: 1px solid #eee; ">
              <div class="clearfix panel-title">
                <span class="span-title">下一环节</span>
              </div>
              <div class="panel-detail" style="height: 150px">
                <el-radio-group v-model="selectNextActId" @change="nextActChange">
                  <el-radio name="nextAct" v-for="(item, i) in busiConfigNextActList" :label="item.actId" class="myRadio" :key="item.actId">{{item.actName}}</el-radio>
                </el-radio-group>
              </div>
            </el-aside>
            <el-container style="border: 1px solid #eee">
              <el-main class="myMain">
                <div class="clearfix panel-title">
                  <span class="span-title">下一环节审核人</span>
                  <div style="float: right">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="myCheckAll">全选</el-checkbox>
                    <div class="clearfix"></div>
                  </div>
                </div>
                <div class="panel-detail"  style="height: 150px">
                  <el-checkbox-group v-model="selectNextActPeople" @change="handleCheckedChange">
                    <el-checkbox v-for="(item, i) in busiConfigNextActPeopleList" :label="item.user" :key="item.id" class="myRadio">{{item.diplayName}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-main>
            </el-container>
          </el-container>
          <el-footer style="border: 1px solid #eee; height: auto; padding: 5px 10px">
            <div>
              <div class="clearfix panel-title">
                <span class="span-title">审核意见</span>
              </div>
              <div class="panel-detail">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="auditOpinion">
                </el-input>
              </div>
            </div>
            <div style="display: inline-block; width: 100%;text-align: right;">
              <el-button size="small" type="success" @click="doSave()">确定</el-button>
            </div>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'workFlowRejectCom',
    data() {
      return {
        selectIsDisplay: false,
        checkAll: false,
        isIndeterminate: false,
        busiConfigNextActList: [],
        busiConfigNextActPeopleList: [],
        selectProcessId: '',
        selectProcessVer: '',
        selectNextActId: '',
        selectNextActPeople: [],
        busiSelectNextAct: {},
        busiSelectCurAct: {},
        auditOpinion: '',
        auditParams: {
          busiUserId: '',
          busiUserName: '',
          busiOrgId: '',
          workitemInsId: '',
          desc: '',
          nextActId: '',
          auditPeopleList: [],
          relateData: [],
          processId: '',
          processVer: '',
          curAct: {}
        }
      }
    },
    props: ['workitemInsId', 'busiUserId', 'busiUserName', 'busiOrgId', 'relateData'],
    created() {
      // this.initPage()
    },
    watch: {

    },
    methods: {
      rowClick(row, event, column) {
        // 行单击事件
      },
      buttonRowClick(row, event, column) {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      handleCheckAllChange(val) {
        this.selectNextActPeople = []
        if (val) {
          if (this.busiConfigNextActPeopleList && this.busiConfigNextActPeopleList.length > 0) {
            this.busiConfigNextActPeopleList.forEach((item, i) => {
              this.selectNextActPeople.push(item.user)
            })
          }
          this.isIndeterminate = false
        }
      },
      handleCheckedChange(value) {
        let checkedCount = value.length
        let sum = this.busiConfigNextActPeopleList.length
        this.checkAll = checkedCount === sum
        this.isIndeterminate = checkedCount > 0 && checkedCount < sum
      },
      initPage() {
        this.auditOpinion = ''
        this.selectNextActId = ''
        // 清空所选环节
        this.clearAct()
        // // 清空所选人员
        // this.clearActPeople()

        for (const key in this.auditParams) {
          if (key === 'auditPeopleList' || key === 'relateData') {
            this.auditParams[key] = []
          } else if (key === 'curAct') {
            this.auditParams[key] = {}
          } else {
            this.auditParams[key] = ''
          }
        }

        this.getActListForAudit()
        // 查询业务流程
      },
      getActListForAudit() {
        let args = {}
        args.workitemInsId = this.workitemInsId

        this.$store.dispatch('WfBusiProcActListForReject', args).then(res => {
          if (res && res.success) {
            if (res.data) {
              this.busiConfigNextActList = res.data.nextActList
              this.selectProcessId = res.data.procId
              this.selectProcessVer = res.data.procVersion
              this.busiSelectCurAct = res.data.curAct
              if (this.busiConfigNextActList && this.busiConfigNextActList.length > 0) {
                this.selectNextActId = this.busiConfigNextActList[0].actId
                this.nextActChange(this.selectNextActId)
              }
            }
          } else {
            this.$message({
              type: 'danger',
              message: '流程配置有误，请联系管理员进行查看！'
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      nextActChange(actId) {
        this.clearActPeople()
        this.selectNextActId = actId
        if (this.busiConfigNextActList && this.busiConfigNextActList.length > 0) {
          for (let item of this.busiConfigNextActList) {
            if (actId === item.actId) {
              this.busiSelectNextAct = item
              let auditPeopleList = item.auditPeopleList
              // this.busiConfigNextActPeopleList = item.auditPeopleList
              if (auditPeopleList && auditPeopleList.length > 0) {
                //
                auditPeopleList.forEach((p, i) => {
                  let user = ''
                  user = p.id + ':' + p.name
                  p.user = user

                  let diplayName = p.name
                  if (p.orgName) {
                    diplayName += '（' + p.orgName + '）'
                  }
                  p.diplayName = diplayName

                  if (i === 0) {
                    this.selectNextActPeople.push(user)
                  }
                })
              }
              this.busiConfigNextActPeopleList = auditPeopleList
              break
            }
          }
        }
      },
      doSave() {
        this.auditParams.busiUserId = this.busiUserId
        this.auditParams.busiUserName = this.busiUserName
        this.auditParams.busiOrgId = this.busiOrgId
        this.auditParams.workitemInsId = this.workitemInsId
        this.auditParams.desc = this.auditOpinion
        this.auditParams.nextActId = this.selectNextActId

        let auditPeopleList = []

        for (let user of this.selectNextActPeople) {
          let people = {}
          people.id = user.split(':')[0]
          people.name = user.split(':')[1]
          auditPeopleList.push(people)
        }

        this.auditParams.auditPeopleList = auditPeopleList
        if (this.relateData && this.relateData instanceof Array) {
          this.auditParams.relateData = this.relateData
        }

        this.auditParams.curAct = this.busiSelectCurAct
        this.auditParams.processId = this.selectProcessId
        this.auditParams.processVer = this.selectProcessVer

        if (!this.auditParams.nextActId || !this.auditParams.auditPeopleList || this.auditParams.auditPeopleList.length <= 0) {
          this.$message({
            type: 'warning',
            message: '请选择下一环节及审核人'
          })
        } else {
          this.$emit('auditParamCallBack', this.auditParams)
          this.selectIsDisplay = false
        }
      },
      doAuditInit() {
        this.initPage()
        this.selectIsDisplay = true
      },
      clearAct() { // 清空审核环节
        this.busiConfigNextActList = []
        this.selectNextActId = ''
        this.busiSelectNextAct = {}

        this.selectProcessId = ''
        this.selectProcessVer = ''
        this.busiSelectCurAct = {}

        this.clearActPeople()
      },
      clearActPeople() { // 清空节点审核人
        this.busiConfigNextActPeopleList = []
        this.selectNextActPeople = []
      }
    }
  }
</script>
<style scoped>
  /*.myActTable >>> .el-table__header-wrapper {*/
  /*  display: none !important;*/
  /*}*/
  .myDialog >>> .el-dialog__body {
    padding: 3px 10px 15px 10px !important;
  }
  .myRadio {
    display: block;
    height: 30px;
    line-height: 30px;
    padding-left: 8px;
    padding-top: 5px;
    vertical-align: center;
  }

  .myRadio:first-child {

  }

  .myProcContainer {
    /*height: 400px;*/
    border: 1px solid #eee;
  }

  .myProcContainer .myProcHead {
    background-color: white;
    color: #606266;
    border: 1px solid #eee;
    padding: 0px;
    height: auto;
  }

  .panel-title{
    font-size: 16px;
    font-weight: bold;
    padding:10px 5px;
    border-bottom: 1px solid #eee;
  }

  .panel-detail{
    padding: 5px 5px 5px 5px;
    height: auto;
    overflow: auto;
  }

  .span-title{
   margin: 0px;
  }

  .myMain{
    padding: 0px;
  }

  .myCheckAll >>> .el-checkbox__input {
    line-height: 16px;
    height: 16px;
  }
  .myCheckAll >>> .el-checkbox__label {
    line-height: 16px;
  }
</style>
